<template>
  <view class="tabs-list">
    <!-- 遍历显示各个选项, 每个都在数组中有自己的下标索引index -->
    <!-- 监听点击事件, 记录被点击的index -->
    <!-- 通过当前激活项控制类名 -->
    <view
      @click="changeTab(index)"
      class="tab-item"
      :class="{ current: index === current }"
      v-for="(item, index) in list"
      :key="index"
      >{{ item.name }}</view
    >
    <view
      class="line"
      :class="{
        center: current === 1,
        right: current === 2,
      }"
    ></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 当前被点击的 index
        current: 0,
        // 当前可选项列表
        list: [{ name: "综合" }, { name: "销量" }, { name: "价格" }],
      };
    },
    methods: {
      changeTab(index) {
        this.current = index;
        // 通知父页面, 到底现在切换到了那个标签当中
        this.$emit("change", index);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .tabs-list {
    display: flex;
    justify-content: space-around;
    line-height: 88rpx;
    font-size: 30rpx;
    color: #676767;
    position: relative;
    .tab-item {
      width: 33.33%;
      text-align: center;
    }
    // 当前激活项类名编写样式
    .current {
      color: #3d3d3d;
      font-weight: bold;
    }
    .line {
      width: 23.33%;
      margin: 0 5%;
      height: 3rpx;
      background-color: #eb4450;
      position: absolute;
      bottom: 0;
      left: 0;
      transition: left 0.2s;
    }
    // 居中和靠右的下划线类名编写样式
    .center {
      left: 33.33%;
    }
    .right {
      left: 66.66%;
    }
  }
</style>